<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/index.css" />
        <link rel="stylesheet" href="css/swiper.css" />
        <link rel="stylesheet" href="css/mint.css">
    </head>
        <script src="js/serverUrl.js"></script>
        <script src="js/vue.js"></script>
        <script src="js/mint.js"></script>
        <script src="js/moment.js"></script>
<script type="text/javascript">
</script>

<style type="text/css">
    .user_info_container{
        width:100%;
        height:120px;
        background:#F44336;
        display: flex;
        align-items: center;
    }
    .user_info_image{
        height: 70px;
        width: 70px;
        margin-left: 6vw;
        margin-right: 3vw;
    }
    .user_name{
        font-size: 20px;
        color: white;
    }
    .user_company{
        font-size: 13px;
        color: white;
        margin-top: 5px;
    }
    .function_container{
        display: flex;
        flex-direction: column;
        background-color: white;
        padding-bottom: 15px;
        padding-top: 15px;
    }
    
    .itemContainer{
        display: flex;
        flex-direction: row;
    }
    .function_item{
        width: 30vw;
        height: 14vw;
        display: flex;
        align-items: center;
        background-color: #f0f0f0;
        border-radius: 5px;
        margin-left: 2.5vw;
    }

    .itemImage{
        width: 4vw;
        height: 4vw;
        margin-left: 2vw;
    }
    .itemName{
        font-weight: bold;
        font-size: 13px;
    }
    .itemlabel{
        font-size:10px;
        color: gray;
        margin-top: 5px;
    }
    .containerName{
        font-size: 4vw;
        font-weight: bold;
        margin-left: 4vw;
        margin-bottom: 10px;
    }
    .itemInfo{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .userCenterMenu{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
</style>
    <body>
        <div id="app">
            <div class="user_info_container">
                <img class="user_info_image" src="img/round_logo.png"/>
                <div>
                    <div class="user_name">{{userName}}</div>
                    <div class="user_company">{{userCompany}}</div>
                </div>
            </div>
            
            <div class="function_container" style="margin-top: 10px;">
                <div class="containerName">常规培训</div>
                <div class="itemContainer">
                    <div class="function_item" @click.stop="toDaliy()">
                        <img src="img/job_training.png" class="itemImage" />
                        <div class="itemInfo">
                            <div class="itemName">日常训练</div>
                            <div class="itemlabel">班组日常培训</div>
                        </div>
                    </div>
                    <div class="function_item" @click.stop="toSafe()">
                        <img src="img/safe_training.png" class="itemImage" />
                        <div class="itemInfo">
                            <div class="itemName">安全培训</div>
                            <div class="itemlabel">安全日学习</div>
                        </div>
                    </div>
                    <div class="function_item" @click.stop="toTrainingClass()">
                        <img src="img/operation_training.png" class="itemImage" />
                        <div class="itemInfo">
                            <div class="itemName">专项培训</div>
                            <div class="itemlabel">专项培训</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="function_container" style="margin-top: 20px;">
                <div class="containerName">个人中心</div>
<!--                <div class="itemContainer">-->
<!--                    <div class="function_item">-->
<!--                        <img src="img/user_gerenziliao.png" class="itemImage" />-->
<!--                        <div class="itemInfo">-->
<!--                            <div class="itemName">个人资料</div>-->
<!--                            <div class="itemlabel">个人资料维护</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="function_item">-->
<!--                        <img src="img/user_certificate.png" class="itemImage" />-->
<!--                        <div class="itemInfo">-->
<!--                            <div class="itemName">个人证书</div>-->
<!--                            <div class="itemlabel">个人证书上传</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="function_item">-->
<!--                        <img src="img/user_dangan.png" class="itemImage" />-->
<!--                        <div class="itemInfo">-->
<!--                            <div class="itemName">个人档案</div>-->
<!--                            <div class="itemlabel">一人一档查询</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                -->
                <div class="itemContainer" style="margin-top: 15px;">
<!--                    <div class="function_item">-->
<!--                        <img src="img/job_training.png" class="itemImage" />-->
<!--                        <div class="itemInfo">-->
<!--                            <div class="itemName">一期一档</div>-->
<!--                            <div class="itemlabel">一期一档查询</div>-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="function_item" @click.stop="changePwd()">
                        <img src="img/user_mima.png" class="itemImage" />
                        <div class="itemInfo">
                            <div class="itemName">修改密码</div>
                            <div class="itemlabel">账号密码修改</div>
                        </div>
                    </div>
                    <div class="function_item" @click.stop="logOut()">
                        <img src="img/user_tuichu.png" class="itemImage" />
                        <div class="itemInfo">
                            <div class="itemName">退出登录</div>
                            <div class="itemlabel">退出当前账号</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="userCenterMenu"></div>
        </div>


    </body>
    
    
    
    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data:{
            userName:"",
            userCompany:""
             
          },
          created() {
            window.userNameInfo = this.userNameInfo
            window.userCompanyInfo = this.userCompanyInfo
          },
          methods:{
              userNameInfo(userName){
                this.userName = userName
              },
              userCompanyInfo(userCompany){
                this.userCompany = userCompany
              },
              toNewsDetail (dataId){
                alert(dataId)
              }
          }
        })
        </script>
</html>
